<template>
	<view>
		<z-paging v-if="padding_show" :show-refresher-when-reload="true"  show-refresher-update-time  ref="paging" v-model="dataList" @query="queryList">
			<!-- z-paging默认铺满全屏，此时页面所有view都应放在z-paging标签内，否则会被盖住 -->
			<!-- 需要固定在页面顶部的view请通过slot="top"插入，包括自定义的导航栏 -->
			<view slot="top" class="">
				<u-navbar :borderBottom="false" back-text=" " title="包裹列表"></u-navbar>
				<view class="bar_css">
					<u-tabs v-if="tabshow"  bar-width="118" :list="barList" font-size="28rpx" :bar-style="barStyle" :active-item-style="item_style" :is-scroll="true" :current="current" @change="barChange"></u-tabs>
				</view>
				<view style="height: 10rpx;">
					
				</view>
				
				<view class="button_submit">
					<u-button @click="fahuoAll" v-if="current==1 " class="btns" :custom-style="{'background':'#90c0ff' ,color:'#fff'}"  :shape="'circle'" :hair-line="false" :ripple="true" ripple-bg-color="rgba(9, 82, 200, 0.15)">发货</u-button>
					<u-button v-if="current==3 && chooseItem.length>1"  @click="wechatePay(chooseItem)" class="btns" :custom-style="{'background':'#90c0ff' ,color:'#fff'}"  :shape="'circle'" :hair-line="false" :ripple="true" ripple-bg-color="rgba(9, 82, 200, 0.15)">合并支付</u-button>
				</view>
			</view>
			
		    <view class="list" >
				<view v-for="(item,index) in dataList" :key="index" class="list_item_box">
					<view class="list_item">
						<!-- 待发货和待支付显示多选按钮 -->
						<view v-if="current==1 || current==3" class="radios" @click="radioChoose(index)">
							<image v-if="item.isChoose" style="width: 32rpx; height: 32rpx;" src="https://www.mengkahuyu.com/index_png/radio_choose.png" mode=""></image>
							<image v-else style="width: 32rpx; height: 32rpx;" src="https://www.mengkahuyu.com/index_png/radio.png" mode=""></image>
						</view>
						<u-image  @click="seeInfo(item.pic)" v-if="current>0" border-radius="8" width="112rpx" height="112rpx"  :src="item.pic"></u-image>
						<!-- <image   style="width: 112rpx; height: 112rpx;" :src="item.pic" mode=""></image> -->
						<view @click="toInfo(item.id)" class="list_item_info">
							<view  class="info_item">
								<span class="list_item_title">单号:</span>
								<view class="list_item_text_code" >{{item.code?item.code:'-'}}</view>
								
							</view>
							<view v-if="item.express_code" class="info_item">
								<span class="list_item_title">物流单号:</span>
								<view class=".list_item_text_code"  >{{item.express_code?item.express_code:'-'}}</view>
								
							</view>
							<view v-if="current<=1" class="info_item">
								<span class="list_item_title">包裹备注:</span>
								<view class="list_item_text_other"  >{{item.remark}}</view>
							</view>
							<view v-if="current>1" class="info_item">
								<span class="list_item_title">发货方式:</span>
								<view class="list_item_text" >
									{{item.shipping_type_name}}
								</view>
							</view>
							<view v-if="current>1 " class="info_item">
								<span class="list_item_title">重量:</span>
								<view class="list_item_text" >{{item.weight?item.weight:'-'}}</view>
							</view>
							<view v-if="current>1" class="info_item">
								<span class="list_item_title">价格:</span>
								<view class="list_item_text" style="color: #FF0000;" >{{item.price?`¥${item.price}`:'-'}}</view>
							</view>
						</view>
					</view>
					<view class="list_item_bottom">
						<view class="bottome_left">
							{{item.add_time}}
						</view>
						<view v-if="item.status==0" @click="del(item.id)"  class="bottome_right" style="background-color: #ef4040;">
							删除
						</view>
					
						<view @click="wechatePay(item.id)" v-if="item.status==3" class="bottome_right">
							立即支付
						</view>
						<!-- <view @click="navTo('/pages/complete/complete_zh?type='+type+'&id='+item.id)" v-if="item.status==1" class="bottome_right">
							完善信息
						</view> -->
						<view v-if="item.status==4" class="" style="display: flex; ">
							<view @click="toast_shenqing()" class="bottome_right" style="margin-right: 16rpx;">
								查看物流
							</view>
							<view @click="shouHuo(item.id , 10)" class="bottome_right">
								确认收货
							</view>
						</view>
						
					</view>
				</view>
		    </view>
			<view  style="opacity: 0;"  class="button_submit_ding">
				<u-button  v-if="current==1" class="btns" :custom-style="{'background':'#90c0ff' ,color:'#fff'}"  :shape="'circle'" :hair-line="false" :ripple="true" ripple-bg-color="rgba(9, 82, 200, 0.15)">发货</u-button>
			</view>
			
		</z-paging>
	</view>
</template>

<script>
	import logistics from '@/componts/xinyu-logistics/xinyu-logistics.vue'
	export default {
		components: { logistics },
		data() {
			return {
				padding_show:false,
				tabshow:false,
				wuliu_show:false,
				wuliuList:[],
				type:1,
				current:0,
				title:'韩区包裹',
				dataList:[],
				chooseItem:[],
				item_style:{
					color:'#333',
					fontSize:'28rpx'
				},
				barStyle:{
					background:'#83b9ff',
					height:'4rpx',
					padding:0
				},
				barList:[
					{name: '未入库(0)'},
					{name: '已入库(0)'},
					{name: '待发货(0)'},
					{name: '待支付(0)'},
					{name: '已出库(0)'},
					{name: '已查验(0)'},
					{name: '已签收(0)'},
				],
			}
		},

		onLoad(data) {
			
			if(data.current){
				this.current = data.current
			}
		},
		onShow() {
			var token = uni.getStorageSync('token')
			this.chooseItem = []
			this.padding_show = false
			setTimeout(()=>{
				this.padding_show = true
			},100)
			// if(token){
			// 	if(this.$refs.paging){
			// 		this.$refs.paging.reload()	
			// 	}
			// }
		},
		methods: {
			toast_shenqing(){
				uni.showModal({
					title: '提示',
					content: '复制链接后打开浏览器,查看物流',
					cancelText: "取消", // 取消按钮的文字  
					confirmText: "复制", // 确认按钮的文字  
					showCancel: true, // 是否显示取消按钮，默认为 true
					success: (res) => {
					if(res.confirm) {  
						uni.setClipboardData({
							data: 'https://track.shiptrack.co.kr/',
							success: function(t) {
								uni.showToast({
								    title: '复制成功',
								    //将值设置为 success 或者直接不用写icon这个参数
								    icon: 'success',
								    //显示持续时间为 2秒
								    duration: 2000
								})
							}
						});
					} else {}  
					} 
				})
			},
			navTo_wuliu(url , item){
				var that = this
				uni.setClipboardData({
					data: item,
					success: function(t) {
						uni.showToast({
						    title: '物流单号复制成功',
						    //将值设置为 success 或者直接不用写icon这个参数
						    icon: 'none',
						    //显示持续时间为 2秒
						    duration: 1000
						})
						setTimeout(()=>{
							that.navTo(url)
						},1000)
						
					}
				});
			},
			seeInfo(url) {
				if(url){
					uni.showLoading({
						title: '加载中'
					});
					uni.previewImage({
						urls: [url],
						complete: () => {
							uni.hideLoading();
						}
					});
				}
			},
			shouHuo(id , status){
				var data = {
					id:id,
					"status": status //审核完成改为待打包3待打包 4待发货
				}
				uni.showModal({
					title: '提示',//标题
					content: status==10?"确认收到包裹?":'确认取消暂存包裹?',//提示内容可以加入\r\n进行换行
					showCancel: true,//是否显示取消按钮，默认为true
					success: res => {
						if (res.confirm) { //点击确定之后执行的代码
							this.$wqzApi.kor_Order_status(data).then(res=>{
								this.current = 6
								uni.showToast({
									title: status==10?"收货成功":'取消成功',
									icon:"none"
								})
								this.$refs.paging.reload()	
							}).catch(err=>{
								
							})
						} else if (res.cancel) { //点击取消之后执行的代码
						}
					},
				});
				
			},
		
			// 订单支付
			wechatePay(id){
				var type = typeof id
				if(type == 'object'){
					id = id.join(',')
				}
				var data = {
					id:id
				}
				uni.showLoading({	
					mask:true,
					title:'支付中...'
				})
				this.$wqzApi.kor_pay(data).then(res=>{
					var data =JSON.parse(res.data) 
					// 吊起微信支付
					wx.requestPayment({
					  timeStamp: data.timeStamp,
					  nonceStr: data.nonceStr,
					  package: data.package,
					  signType: 'MD5',
					  paySign: data.paySign,
					  success (res) {
						  uni.hideLoading()
						  uni.showToast({
						  	title:'支付成功',
							icon:'none'
						  })
						 // this.$refs.paging.reload()	
						 that.current = 4
						 that.padding_show = false
						 setTimeout(()=>{
							 that.padding_show = true
						 },500)
					  },
					  fail (res) {
						  uni.hideLoading()
						  // console.log(res , '支付失败返回')
					  }
					})
				}).catch(err=>{
					
				})
				
				
				
			},
			fahuoAll(){
				// 合并发货
				if(this.chooseItem.length<1){
					uni.showToast({
						title:'请选择发货包裹',
						icon:'none'
					})
					return
				}
				var str = this.chooseItem.join(',')
				this.navTo('/pages/complete/complete_zh?type='+this.type+'&id='+str)
			},
			toInfo(id){
				var url = ''
				if(this.current==0){
					url = '/pages/yuBao/yuBao_zh?order_id='+id
				}else{
					url = '/pages/order_info/order_info_zh?order_id='+id
				}
				uni.navigateTo({
					url:url
				})
			},
			del(id){
				var that = this
				uni.showModal({
					title: '提示',//标题
					content: "确认删除包裹",//提示内容可以加入\r\n进行换行
					showCancel: true,//是否显示取消按钮，默认为true
					success: res => {
						if (res.confirm) { //点击确定之后执行的代码
							that.$wqzApi.kor_Order_del({id:id}).then(res=>{
								uni.showToast({
									title:'操作成功',
									icon:'none'
								})
								this.$refs.paging.reload()
							})
						} else if (res.cancel) { //点击取消之后执行的代码
						}
					},
				});
			},
			queryList(pageNo, pageSize) {
				// 此处请求仅为演示，请替换为自己项目中的请求
				var data = {
					page:pageNo,
					limit:pageSize,
					status:this.current==6?10:this.current,
					type:this.type
				}
				var that = this
				this.$wqzApi.kor_Order_list(data).then(res=>{
					this.$refs.paging.complete(res.data.list);
					this.barList.forEach((item,index)=>{
								// [0=>'未入库',1=>'已入库',2=>'待发货',3=>'待支付',4=>'已出库',5=>'已签收'];
						that.barList[0].name = `未入库(${res.data.statusCount.status0})`
						that.barList[1].name = `已入库(${res.data.statusCount.status1})`
						that.barList[2].name = `待发货(${res.data.statusCount.status2})`
						that.barList[3].name = `待支付(${res.data.statusCount.status3})`
						that.barList[4].name = `已出库(${res.data.statusCount.status4})`
						that.barList[5].name = `已查验(${res.data.statusCount.status5})`
						that.barList[6].name = `已签收(${res.data.statusCount.status10})`
					})
					this.tabshow = true
				}).catch(err=>{
					this.$refs.paging.complete(false);
				})
			},
			barChange(e){
				
					this.current = e
				
				this.$refs.paging.reload()	
				this.chooseItem = []
			},
			radioChoose(key){
				this.dataList.forEach((item,index)=>{
					if(index == key){
						this.dataList[index].isChoose = !this.dataList[index].isChoose
					}
				})
				this.chooseItem = []
				this.dataList.forEach((item,index)=>{
					if(item.isChoose == true){
						this.chooseItem.push(item.id)
					}
					
				})
				if(this.chooseItem.length>1){
					
				}
			},
			navTo(url){
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url(./index.scss);
</style>
